<template>
  <div class="pcocess-view__wrapper" v-show = 'visible'>
    <div class = 'pcocess-view__header'>
      <bread-crumb :titleArr="titleArr" @back="backClick"></bread-crumb>
    </div>
    <div class = 'pcocess-view__box'>
      <div class = 'pcocess-view__operation'>
         <process-flow :flowData = 'processData' :processViewShow = 'visible' @prcessNodeCancel = 'backClick' :isUpdateFirstNode = 'isUpdateFirstNode' :isUpdateProcessView = 'isUpdateProcessView' @backCurrentNode = 'backCurrentNode' @processUpdateSuccess = 'processUpdateSuccess'></process-flow>
      </div class = 'pcocess-view__flow'>
    </div>
  </div>
</template>
<script>
  import BreadCrumb from '@/components/ui-modules/breadCrumb/BreadCrumbConfig'
  import processFlow from './processFlow.vue'
  export default {
    name: 'pcocessView',
    data () {
      return {
        isWatch: 0
      }
    },
    props: {
      visible: {
        type: Boolean,
        default: true
      },
      processData: {
        type: Object,
        default: function () {
          return {DisplayName: '', FirstNode: '', FirstNodeType: ''}
        }
      },
      titleArr: {
        type: Array,
        default: ['流程管理', '添加IVR流程']
      },
      isUpdateProcessView: {
        type: Number,
        default: 0
      },
      isUpdateFirstNode: {
        type: Number,
        default: 0
      }
    },
    watch: {
      titleArr (newArr) {
        this.titleArr = newArr
      }
    },
    components: {
      BreadCrumb,
      processFlow
    },
    methods: {
      backClick () {
        this.handleClose()
      },
      handleClose () {
        if (typeof this.beforeClose === 'function') {
          this.beforeClose(this.hide)
        } else {
          this.hide()
        }
      },
      hide () {
        this.$emit('update:visible', false)
        this.$emit('close')
      },
      backCurrentNode (data) {
        this.$emit('backCurrentNode', data)
      },
      processUpdateSuccess () {
        this.$emit('processUpdateSuccess')
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .pcocess-view__box
   padding 20px
   box-sizing border-box
</style>
